<template>
	<view class="order">
		
		<scroll-view scroll-x="true">
			<view class="tab flex_center">
				<view class="tab_item" @click="onTab(0)">
					<text>全部</text>
					<view class="select_bg" :id="status == 0 ? 'select' : ''"></view>
				</view>
				<view class="tab_item" @click="onTab(1)">
					<text>待支付({{one || 0}})</text>
					<view class="select_bg" :id="status == 1 ? 'select' : ''"></view>
				</view>
				<view class="tab_item" @click="onTab(2)">
					<text>待接单({{two || 0}})</text>
					<view class="select_bg" :id="status == 2 ? 'select' : ''"></view>
				</view>
				<view class="tab_item" @click="onTab('3,4')">
					<text>待完成({{three || 0}})</text>
					<view class="select_bg" :id="status == '3,4' ? 'select' : ''"></view>
				</view>
				<view class="tab_item" @click="onTab('5,6')">
					<text>已完成({{four || 0}})</text>
					<view class="select_bg" :id="status == '5,6' ? 'select' : ''"></view>
				</view>
				<!-- <view class="tab_item" @click="onTab(7)">
					<text>退款/售后({{five || 0}})</text>
					<view class="select_bg" :id="status == 7 ? 'select' : ''"></view>
				</view> -->
			</view>
		</scroll-view>

		<empty v-if="!list.length"></empty>
		
		<view class="list">
			<view class="item" v-for="(item,index) in list" :key="index"
				@click="$util.toUrl(`/pages/store/order/orderContent?id=${item.id}`)">
				<view class="left flex_center">
					<view class="image">
						<image :src="item.image" mode="aspectFill"></image>
					</view>
					<view class="name">
						<view class="flex_r_between">
							<view class="hidden flex_1">{{item.name}}</view>
							<!-- 状态:1=未支付,2=待接单,3=待服务,4=服务中,5=已完成,6=已评价,7=已退款 -->
							<!-- return_status 1=未退款  2=申请中  3=已退款  4=驳回退款,5=商家同意退款 -->
							<view class="right" v-if="item.complain_status != 2 && item.complain_status != 3">
								{{
									item.status == 5 ? '已完成'
									: item.status == 6 ? '已评价'
									: item.return_status == 2 ? '退款申请中'
									: item.return_status == 3 ? '已退款'
									: item.return_status == 4 ? '退款驳回'
									: item.return_status == 5 ? '商家同意退款'
									: item.status == 1 ? '待支付'
									: item.status == 2 ? '待接单'
									: item.status == 3 && item.kefu == 1 ? '待服务'
									: item.status == 3 && item.kefu == 2 ? '待发货'
									: item.status == 4 && item.kefu == 1 ? '服务中'
									: item.status == 4 && item.kefu == 2 ? '已发货'
									: item.status == 7 ? '已退款'
									:''
								}}
							</view>
							<image v-else src="/static/store/tousu_status.png" mode="aspectFill" class="tousu_status">
							</image>
						</view>
						<view class="flex_r_between">
							<view class="text">下单时间：<uni-dateformat :date="item.create_time"
									format="yyyy-MM-dd hh:mm"></uni-dateformat></view>
							<view class="price">
								<i>￥</i>
								<text>{{item.pay_price}}</text>
							</view>
						</view>
					</view>
				</view>

				<view class="btn_view flex_r_between">
					<view @click.stop="$native.makeCall(item.mobile)">
						<view class="left_btn" v-if="item.status != 5 && item.status != 6 && item.status != 7">
							<image class="avatar" :src="item.avatar" mode="aspectFill"></image>
							<image class="icon" src="/static/store/make_call.png" mode="aspectFill"></image>
						</view>
					</view>
					<view class="right_btn flex_center">
						<view class="accept"
							v-if="item.status == 2 && (item.return_status == 1 || item.return_status == 4)"
							@click.stop="acceptOrder(item)">立即接单</view>
						<view class="back" v-if="item.complain_status == 2 || item.complain_status == 2"
							@click.stop="show_back = true">立即处理</view>

						<!-- 2024.10.19 窦凯 和 雪姐   让我在退款申请中也可以确认发货 -->
						<view class="back" @click.stop="sendOrder(item)"
							v-if="item.kefu != 1 && item.status == 3 && (item.return_status == 1 || item.return_status == 2 || item.return_status == 4)">
							确认发货
						</view>

						<view class="return" v-if="item.return_status == 2 && item.status != 5 && item.status != 6"
							@click.stop="returnOrder(item)">退款</view>
					</view>
				</view>
			</view>
		</view>

		<u-modal :show="return_model" title="退款" cancelText="取消" :showCancelButton="true" :asyncClose="true"
			:closeOnClickOverlay="true" @close="return_model = false" @cancel="return_model = false"
			@confirm="onReturn">
			<view class="slot-content">
				<view class="model_content flex_r_around">
					<input placeholder="请输入退款金额" v-model="return_price" type="digit" @input="checkNum"
						placeholder-class="input-placeholder">
				</view>
			</view>
		</u-modal>

		<u-modal :show="send_model" title="确认发货" cancelText="取消" :showCancelButton="true" :asyncClose="true"
			:closeOnClickOverlay="true" @close="send_model = false" @cancel="send_model = false" @confirm="onSend">
			<view class="slot-content">
				<view class="model_content flex_r_around">
					<input placeholder="请输入快递单号" v-model="send_num" type="text" placeholder-class="input-placeholder">
				</view>
			</view>
		</u-modal>

		<u-modal :show="show_back" title="提示" content='请于24小时内处理，否则将影响您店铺等级，信誉及广告成本' :closeOnClickOverlay="true"
			cancelText="我知道了" :showConfirmButton='false' :showCancelButton='true' @close="show_back = false"
			@cancel="show_back = false">
		</u-modal>
	
	</view>
</template>

<script>
	import empty from '@/compentents/empty/empty.vue';
	export default {
		components: {
			empty,
		},
		data() {
			return {
				// 1=未支付,2=待接单,3=待服务,4=服务中,5=已完成,6=已评价,7=已退款
				status: 0,

				page: 1,
				total: 0,
				list: [],

				return_model: false,
				show_back: false,
				send_model: false,

				return_price: '',
				return_item: {},

				send_num: '',
				send_item: {},

				one: 0,
				two: 0,
				three: 0,
				four: 0,
				five: 0,
			}
		},
		methods: {
			onTab(e) {
				this.status = e;
				this.list = [];
				this.page = 1;
				this.getList();
				this.getOrderStatusData();
			},

			getList() {
				this.$get('/store.order/getStoreOrderList', {
					status: this.status,
					page: this.page
				}).then(res => {
					this.total = res.data.total;
					this.list.push(...res.data.data);
				})
			},

			refresh() {
				this.page = 1;
				this.$get('/store.order/getStoreOrderList', {
					status: this.status,
					page: this.page
				}).then(res => {
					this.list = [];
					this.total = res.data.total;
					this.list.push(...res.data.data)
					this.getOrderStatusData();
					uni.stopPullDownRefresh();
				})
			},

			getMore() {
				if (this.list.length < this.total) {
					this.page++;
					this.$get('/store.order/getStoreOrderList', {
						status: this.status,
						page: this.page
					}).then(res => {
						this.total = res.data.total;
						this.list.push(...res.data.data)
					})
				}

			},

			acceptOrder(item) {
				// 接单
				this.$get('/order/acceptOrder', {
					order_id: item.id
				}).then(res => {
					this.$util.msg('已接单');
					this.list = [];
					this.page = 1;
					this.getList();
					this.getOrderStatusData();
				})
			},

			returnOrder(item) {
				// 退款
				this.return_item = item;
				this.return_model = true;
			},

			onReturn() {
				if (!this.return_price) {
					this.return_model = false;
					return this.$util.msg('请输入正确的金额');
				}

				if (this.return_price < 0.01) {
					this.return_model = false;
					return this.$util.msg('请输入正确的金额');
				}

				this.$post('/store.order/turnRefundPrice', {
					"order_id": this.return_item.id,
					"return_status": 3,
					"return_price": this.return_price,
					"trun_remark": ''
				}, true, (e) => {
					this.return_model = false;
				}).then(res => {
					this.$util.msg(res.msg);
					this.return_model = false;
					this.list = [];
					this.page = 1;
					this.getList();
					this.getOrderStatusData();
				});


			},

			sendOrder(item) {
				// 退款
				this.send_item = item;
				this.send_model = true;
			},

			onSend() {
				if (!this.send_num) {
					this.send_model = false;
					return this.$util.msg('请输入快递单号');
				}

				this.$get('/order/startOrder', {
					order_id: this.send_item.id,
					tracking_number: this.send_num
				}, true, (e) => {
					this.send_model = false;
				}).then(res => {
					this.send_num = '';
					this.send_model = false;
					this.list = [];
					this.page = 1;
					this.getList();
					this.getOrderStatusData();
					this.$util.msg('发货成功');
				})


				// this.$post('/store.order/turnRefundPrice', {
				// 	"order_id": this.return_item.id,
				// 	"return_status": 3,
				// 	"return_price": this.return_price,
				// 	"trun_remark": ''
				// }).then(res => {
				// 	this.$util.msg(res.msg);
				// 	this.return_model = false;
				// 	this.list = [];
				// 	this.page = 1;
				// 	this.getList();
				// 	this.getOrderStatusData();
				// });


			},

			// 限制两位小数
			checkNum(e) {
				let value = e.detail.value;
				let dot = value.indexOf('.'); //包含小数点
				let reg = /^[0-9]+$/; //正整数
				if (dot > -1) {
					this.maxlength = dot + 3; //长度是小数点后两位
					if (value.length > dot + 3) {

					}
				}
				if (reg.test(value)) { //如果是正整数不包含小数点
					this.maxlength = 10;
				}
			},


			subReturnOrder() {
				this.$get('/order/acceptOrder', {
					order_id: item.id
				}).then(res => {
					this.$util.msg('已接单');
					this.list = [];
					this.page = 1;
					this.getList();
					this.getOrderStatusData();
				})
			},

			backOrder(item) {
				// 驳回

			},
			getOrderStatusData() {
				this.$post('/store.order/getOrderStatusData').then(res => {
					this.one = 0;
					this.two = 0;
					this.three = 0;
					this.four = 0;
					this.five = 0;
					res.data.forEach(element => {
						if (element.status == 1) {
							this.one += element.num;
						}

						if (element.status == 2) {
							this.two += element.num;
						}

						if (element.status == 3 || element.status == 4) {
							this.three += element.num;
						}

						if (element.status == 5 || element.status == 6) {
							this.four += element.num;
						}

						if (element.status == 7) {
							this.five += element.num;
						}
					});
				})
			}

		},

		created() {
			this.getList();
			this.getOrderStatusData();
		}
	}
</script>

<style lang="less" scoped>
	.order {
		padding: 0 32rpx;
		padding: 0 32rpx 30rpx;
	}

	.tab {
		.tab_item {
			margin-right: 48rpx;
			flex-shrink: 0;

			text {
				font-size: 28rpx;
				color: #666666;
			}

			.select_bg {
				height: 12rpx;
				background: transparent;
			}

			#select {
				background: linear-gradient(118deg, #FD2A53 0%, rgba(255, 255, 255, .1) 100%);
			}
		}
	}

	.list {
		.item {
			position: relative;
			margin-top: 40rpx;
			padding: 32rpx;
			background: #FFFFFF;
			border-radius: 24rpx;

			.left {
				flex: 1;

				.image {
					flex-shrink: 0;
					width: 128rpx;
					height: 128rpx;
					border-radius: 8rpx;
					overflow: hidden;
					margin-right: 20rpx;

					image {
						width: 128rpx;
						height: 128rpx;
						color: #ECECF4;
					}
				}

				.name {
					flex: 1;
					overflow: hidden;

					view {
						font-weight: 500;
						font-size: 32rpx;
						color: #131313;
						margin-bottom: 8rpx;
					}

					.text {
						font-size: 24rpx;
						color: #999999;
					}

					.right {
						font-size: 26rpx;
						color: #FD2A53;
					}

					.tousu_status {
						width: 40rpx;
						height: 40rpx;
					}

					.price {
						text {
							font-weight: 600;
							font-size: 40rpx;
							color: #131313;
						}

						i {
							font-weight: 600;
							font-size: 28rpx;
							color: #131313;
							font-style: normal;
						}
					}
				}
			}

			.btn_view {
				margin-top: 30rpx;

				.left_btn {
					position: relative;

					.avatar {
						width: 72rpx;
						height: 72rpx;
						border-radius: 36rpx;
					}

					.icon {
						width: 40rpx;
						height: 40rpx;
						background: #FD2A53;
						border-radius: 20rpx;
						position: absolute;
						bottom: 0;
						left: 0;
						margin-left: 46rpx;
					}
				}

				.right_btn {
					view {
						width: 168rpx;
						height: 64rpx;
						border-radius: 32rpx;
						font-size: 28rpx;
						line-height: 62rpx;
						text-align: center;
						margin-left: 24rpx;
					}

					.accept {
						background: #FD2A53;
						color: #FFF;
						border: 2rpx solid #FD2A53;
					}

					.return {
						background: #FFF;
						color: #FBA219;
						border: 2rpx solid #FBA219;
					}

					.back {
						background: #FFF;
						color: #131313;
						border: 2rpx solid #CCC;
					}
				}
			}
		}
	}

	.model_content {
		height: 100rpx;
		background: #F8F8F8;
		border-radius: 16rpx;

		input {
			text-align: center;
		}
	}
</style>